<template>
	<view class="mainbgc">
		<backtop ref="backtops"></backtop>
		<view class="content">
			<!-- 分类筛选 -->
			<u-popup :show="show_fenlei" :round="10" mode="bottom" @close="show_fenlei = false;">
				<view class="nav">
					<view class="form">分类</view>
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="flexleft flex_wrap">
							<view :class="item.ischeck?' lan':'pu'" v-for="(item,index) in shoplist" :key="item.id"
								@click="select(item)">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
					<view class="footer flexbetween">
						<view class="resetbtn" @click="reset">重置</view>
						<view class="surebtn" @click="sure">确认</view>
					</view>
				</view>
			</u-popup>
			<u-popup :show="show_zonghe" mode="bottom" closeOnClickOverlay @close="show_zonghe=false">
				<view>
					<view :class="zonghe_text=='综合升序'?'lansetext mainpadding':'notitletext mainpadding'"
						@click="change_zonghe('综合升序')">综合升序</view>
					<view :class="zonghe_text=='综合降序'?'lansetext mainpadding':'notitletext mainpadding'"
						@click="change_zonghe('综合降序')">综合降序</view>
					<view :class="zonghe_text=='距离升序'?'lansetext mainpadding':'notitletext mainpadding'"
						@click="change_zonghe('距离升序')">距离升序</view>
					<view :class="zonghe_text=='距离降序'?'lansetext mainpadding':'notitletext mainpadding'"
						@click="change_zonghe('距离降序')">距离降序</view>
					<view :class="zonghe_text=='时间升序'?'lansetext mainpadding':'notitletext mainpadding'"
						@click="change_zonghe('时间升序')">时间升序</view>
					<view :class="zonghe_text=='时间降序'?'lansetext mainpadding':'notitletext mainpadding'"
						@click="change_zonghe('时间降序')">时间降序</view>
				</view>
			</u-popup>
			<!-- 搜索框 -->
			<view class="flexleft">
				<view class="ss flexleft">
					<image src="@/static/images/sy_slices/search.png" mode="" class="search"></image>
					<input type="text" placeholder="请输入" class="inp" v-model="keywords">
				</view>
				<view class="sea" @click="init()">搜索</view>
			</view>
			<!-- 轮播图 -->
			<view class="margin_top">
				<u-swiper :list="list1" height="150" keyName="image_text" @change="e => currentNum = e.current" @click="jumprul(list1,currentNum)" circular></u-swiper>
			</view>
			<view class="flexbetween header">
				<view :class="zh_sort!=0?'lansetext flexleft':'nostrongtext flexleft'"><text
						@click="show_zonghe=true">{{zonghe_text}}</text>
					<view class="flexcolumn" v-show="zonghe_text=='综合升序'||zonghe_text=='综合降序'">
						<view class="shanghuijt" v-show="zh_sort==1 || zh_sort==0"></view>
						<view class="shangljt" v-show="zh_sort==2"></view>
						<view class="xiahuijt" v-show="zh_sort==2 || zh_sort==0"></view>
						<view class="xialjt" v-show="zh_sort==1"></view>
					</view>
					<view class="flexcolumn" v-show="zonghe_text=='距离升序'||zonghe_text=='距离降序'">
						<view class="shanghuijt" v-show="distance_sort==1 || distance_sort==0"></view>
						<view class="shangljt" v-show="distance_sort==2"></view>
						<view class="xiahuijt" v-show="distance_sort==2 || distance_sort==0"></view>
						<view class="xialjt" v-show="distance_sort==1"></view>
					</view>
					<view class="flexcolumn" v-show="zonghe_text=='时间升序'||zonghe_text=='时间降序'">
						<view class="shanghuijt" v-show="createtime_sort==1 || createtime_sort==0"></view>
						<view class="shangljt" v-show="createtime_sort==2"></view>
						<view class="xiahuijt" v-show="createtime_sort==2 || createtime_sort==0"></view>
						<view class="xialjt" v-show="createtime_sort==1"></view>
					</view>
				</view>
				<view :class="rq_sort!=0?'lansetext flexleft':'nostrongtext flexleft'" @click="changerq">人气
					<view class="flexcolumn">
						<view class="shanghuijt" v-show="rq_sort==1 || rq_sort==0"></view>
						<view class="shangljt" v-show="rq_sort==2"></view>
						<view class="xiahuijt" v-show="rq_sort==2 || rq_sort==0"></view>
						<view class="xialjt" v-show="rq_sort==1"></view>
					</view>
				</view>
				<uni-data-picker @change="bindPickerChange" :localdata="items">
					<view class="flexleft nostrongtext">地区<view class="grey_jiao"></view>
					</view>
				</uni-data-picker>
				<view @click="show_fenlei=true" class="nostrongtext flexleft">分类<view class="grey_jiao"></view>
				</view>
			</view>
			<view>
			</view>
			<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
				<view class="placeimage"></view>
			</view>
			<view class="" v-if="list.data.length">
				<view class="nav_a  flex_wrap">
					<view class="nav_b relative" v-for="item in list.data" :key="item.id" @click="xiangqing(item.id)">
						<view class="yxlable" v-show="item.yx_type==1">优选</view>
						<view class="flexleft">
							<view class="left">
								<image :src="item.user.avatar_text" mode="" class="car_img"></image>
							</view>
							<view class="right">
								<view class="flexbetween">
									<view class="right_henan">{{item.shop_name}}</view>
									<view class="vip" v-if="item.user.vip_status">VIP认证</view>
									<view class="header_pt" v-if="!item.user.vip_status && item.user.platform_status==1">平台认证</view>
								</view>
								<view class="flexleft flex_wrap">
									<view class="zhuying">主营：{{item.zyyw}}</view>
								</view>
							</view>
						</view>
						<!-- 地址 -->
						<view class="add flexbetween">
							<view class="flexleft">
								<view class="address">{{item.cityinfo}}{{item.address}}</view>
								<view class="km">{{kmUnit(Number(item.distance))}}</view>
							</view>
							<view class="flexleft">
								<view class="locations margin_right" @click="openmap(item)"></view>
								<view class="phone" @click.stop="phone(item.shoplx[0].mobile)"></view>
							</view>
						</view>
						<view class="look_details">查看详情</view>
					</view>
				</view>
				<view class="footertextdaodi">老板！到底没数据了！</view>
			</view>

		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				currentNum:0,
				list1: [],
				shoplist: [],
				shop_item_ids: "",
				show_fenlei: false, //分类
				show_zonghe: false, //综合
				zonghe_text: "综合升序",
				zh_sort: 0, //:0=不按综合排序,1=降序,2=升序
				rq_sort: 0, //:0=不按人气排序,1=降序,2=升序
				distance_sort: 0, //0=不按距离排序,1=降序,2=升序
				createtime_sort: 0, //0=不按时间排序,1=降序,2=升序
				flag:false,//判断综合筛选高亮
				keywords: "",
				lat: "",
				lng: "",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				items: [],
			}
		},
		onLoad() {
			let arr = JSON.parse(JSON.stringify(citys.data))
			arr.forEach(item => {
				item.children.forEach(ite => {
					ite.children.unshift({
						"value": "",
						"text": "不限",
						"pid": ""
					})
				})
				item.children.unshift({
					"value": "",
					"text": "不限",
					"pid": "",
				})
			})
			arr.unshift({
				"value": "",
				"text": "全国",
				"pid": "",
			})
			this.items = arr
			this.getfl()
			this.getlocation()
			this.getlbt()
		},
		onPageScroll(res) {
				if (res.scrollTop > 700) {
					this.$refs.backtops.isshow = true
				} else {
					this.$refs.backtops.isshow = false
				}
			},
		methods: {
			getlbt() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 15,
					is_more: 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.list1 = res.data
					}
				})
			},
			jumprul(item,index) {
				let i = []
				item.forEach(items=>{
					i.push(items.image_text)
				}) //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
				if (item.url == "") {
					return false
				}
				uni.navigateTo({
					url: item.url
				})
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					}
				});
			},
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			// 获取优选仓库列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/Company/shopList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					lat: this.lat,
					lng: this.lng,
					keywords: this.keywords,
					shop_item_ids: this.shop_item_ids,
					zh_sort: this.zh_sort,
					rq_sort: this.rq_sort,
					distance_sort: this.distance_sort,
					createtime_sort: this.createtime_sort,
					province_id: this.address.province,
					city_id: this.address.city,
					area_id: this.county
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			bindPickerChange(val) {
				let area = val.detail.value
				if (area.length == 3) {
					this.area = [area[0].text, area[1].text, area[2].text];
					this.address.province = area[0].value;
					this.address.city = area[1].value;
					this.address.county = area[2].value=="0312"?"":area[2].value;
				} else if (area.length == 2){
					this.area = [area[0].text, area[1].text, "不限"];
					this.address.province = area[0].value;
					this.address.city = area[1].value=="0311"?"":area[1].value;
					this.address.county = ""
				}else{
					this.area = ["全国", "不限", "不限"];
					this.address.province = "";
					this.address.city = "";
					this.address.county = ""
				}
				this.init()
			},
			getfl() {
				httpRequest.request('/api/Company/shopItem', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "ischeck", false)
						})
						this.shoplist = res.data
					}
				})
			},
			change_zonghe(text) { //综合筛选
				this.show_zonghe = false
				this.zonghe_text = text
				switch (text) {
					case '综合升序':
						this.zh_sort = 1
						break;
					case '综合降序':
						this.zh_sort = 2
						break;
					case '距离升序':
						this.distance_sort = 1
						break;
					case '距离降序':
						this.distance_sort = 2
						break;
					case '时间升序':
						this.createtime_sort = 1
						break;
					case '时间降序':
						this.createtime_sort = 2
						break;
				}
				this.init()
			},
			changezh() {
				// let text = this.zonghe_text
				// if (text == '综合') {
				// 	this.zh_sort = this.zh_sort == 0 ? 1 : this.zh_sort == 1 ? 2 : 0
				// } else if (text == '距离') {
				// 	this.distance_sort = this.distance_sort == 0 ? 1 : this.distance_sort == 1 ? 2 : 0
				// } else if (text == '时间') {
				// 	this.createtime_sort = this.createtime_sort == 0 ? 1 : this.createtime_sort == 1 ? 2 : 0
				// }
				// this.init()
			},
			changerq() {
				this.rq_sort = this.rq_sort == 0 ? 1 : this.rq_sort == 1 ? 2 : 0
				this.init()
			},
			xiangqing(id) {
				uni.navigateTo({
					url: '/pages/index/qiyexiangqing?id=' + id
				})
			},
			select(item) { //弹窗
				item.ischeck = !item.ischeck
			},
			sure() {
				let arr = []
				this.shoplist.forEach(item => {
					if (item.ischeck) {
						arr.push(item.id)
					}
				})
				this.shop_item_ids = arr.join()
				this.init()
				this.show_fenlei = false;
			},
			reset() { //点击确认关闭弹窗
				this.shoplist.forEach(item => {
					item.ischeck = false
				})
				this.shop_item_ids = ""
				this.init()
				this.show_fenlei = false;
			},
			openmap(item) {
				uni.openLocation({
					latitude: Number(item.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.shop_name, //即将传到高德或腾讯地图的店铺名称
					address: item.cityinfo + item.address, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainpadding:hover {
		background-color: #f1f1f1;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.content {
		padding: 30rpx 24rpx;
	}

	.search {
		width: 27rpx;
		height: 27rpx;
	}

	.ss {
		width: 560rpx;
		background-color: #f3f3f3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 18rpx 20rpx 18rpx 42rpx;
	}

	.inp {
		background-color: #f3f3f3;
		width: 400rpx;
		padding: 0rpx 0rpx 0rpx 24rpx;
	}

	.sea {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #228DFF;
		padding-left: 20rpx;
	}

	.header {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 27rpx 28rpx 27rpx 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.gray {
		width: 8rpx;
		height: 12rpx;
		background-size: 100% 100%;
		padding-left: 6rpx;
	}

	.center {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		background-color: #fff;
		padding: 30rpx 30rpx;
	}

	.hei {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.form {
		text-align: center;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	.pu {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding: 20rpx 62rpx 21rpx 62rpx;
		margin: 30rpx 0rpx 0rpx 10rpx;
	}

	.lan {
		background: RGBA(233, 244, 255, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 20rpx 62rpx 21rpx 62rpx;
		margin: 30rpx 0rpx 0rpx 10rpx;
	}

	.pu_A {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding: 20rpx 71rpx 21rpx 71rpx;
		margin: 30rpx 0rpx 0rpx 30rpx;
	}

	.footer {
		padding: 50rpx 30rpx;
	}

	.nav {
		padding: 30rpx 30rpx;
	}


	// 中间部分
	.nav_b {
		padding: 36rpx 32rpx;
		background-color: #fff;
	}

	.right_henan {
		width: 360rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		padding-left: 19rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.address {
		width: 280rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.km {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding-left: 16rpx;
	}

	.add {
		margin-top: 40rpx;
		padding-bottom: 36rpx;
	}

	.ii {
		margin-right: 22rpx;
	}

	.liu {
		padding-top: 30rpx;
	}

	.nav_a {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 30rpx 0rpx;
	}

	.zhida {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		border: 1rpx solid rgba(34, 141, 255, 1);
		padding: 0rpx 10rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.zd {
		padding: 31rpx 32rpx;
	}

	.xiangqing {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding-right: 11rpx;
		padding-left: 261rpx;
	}

	.car_img {
		width: 132rpx;
		height: 132rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.zhuying {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		padding-left: 19rpx;
		padding-top: 24rpx;
		//超出两行省略号
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	//
</style>